<template>
  <div class="company">
    <div class="top">
      <div class="search">
        <h3>公司</h3>
        <van-search
          v-model="value"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </div>
    </div>
    <!-- 大图 -->
    <van-image src="/bigImg.png" />
    <!-- 公司列表 -->
    <div class="tuijian">
      <span>推荐</span>
      <a href="#">距离</a>
      <a href="#">评分</a>
      <a href="#">筛选</a>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.id">
        <company-list :list="item"></company-list>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import companyList from './components/companyList.vue'
import { getCompany } from '@/api/company.js'
export default {
  components: { companyList },
  data () {
    return {
      value: '',
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const res = await getCompany({
        start: this.list.length + 5,
        limit: 5,
        longitude: 116.403963,
        latitude: 39.915119
      })

      this.list = [...this.list, ...res.data.data.list]
      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.list.length > res.data.total) {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less">
.company {
  padding: 2vw 4vw;

  .top {
    position: fixed;
    top: 0;
    z-index: 1000;
    left: 0;
    right: 0;
    .search {
      padding-left: 4vw;
      display: flex;
      align-items: center;
      align-comtent: center;

      background-color: #fff;

      .van-search {
        flex: 1;
      }
      h3 {
        font-size: 4.8vw;
      }
    }
  }
  .van-image {
    margin-top: 40px;
  }
  .tuijian {
    display: flex;
    justify-content: space-between;
  }
  .van-list {
    .van-cell {
      padding: 0;
      border-bottom: 1px solid #cccccc;
    }
  }
}
</style>
<style></style>
